<template>
  <div>
    <div id="logPieMain" ref="chartLogPie" style="width:100%; height:300px;margin-top:10px;"></div>
  </div>
</template>

<script>
import { logLevel } from '@/api/home'
import { Loading } from 'element-ui'
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  data () {
    return {
      chart: null,
      logPieList: null,
      logPieData: {
        name: ['ALERT', 'DEBUG', 'ERROR', 'INFO'],
        data: [
          { name: 'ALERT', value: 0 },
          { name: 'DEBUG', value: 0 },
          { name: 'ERROR', value: 0 },
          { name: 'INFO', value: 0 }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart().then(res => {
        this.listData()
      })
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    listData (val) {
      if (document.getElementById('LogPie')) {
        this.loadingInstance = Loading.service({
          target: '#LogPie',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      logLevel().then(res => {
        if (res.status === 0) {
          this.logPieList = res.info
          this.logPieData.name = []
          this.logPieData.data = []
          for (let item in res.info) {
            this.logPieData.name.push(item)
            this.logPieData.data.push({ name: item, value: res.info[item] })
          }
          this.chart.setOption(this.option(this.logPieData), true)
        }
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
          this.$emit('loadingClick')
        }
      }).catch(e => {
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
          this.$emit('loadingClick')
        }
      })
    },
    option (val) {
      var data = {
        color: ['#ee6666', '#fac858', '#5ab1ef', '#009966', '#d87a80',
          '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
          '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
          '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'],
        title: {
          // text: '',
          // subtext: '',
          // left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 20,
          top: 20,
          bottom: 20,
          data: val.name,
          selected: val.name
        },
        toolbox: {
          right: 30,
          feature: {
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        series: {
          name: this.$t('日志级别'),
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: val.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      }
      return data
    },
    initChart (val) {
      this.chart = this.$echarts.init(document.getElementById('logPieMain'))
      this.chart.setOption(this.option(this.logPieData), true)
      return Promise.resolve('seccess')
    },
    exportImage () {
      let dataURL = ''
      var img = new Image()
      img.src = this.chart.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff'
      })
      let _that = this
      return new Promise(function (resolve, reject) {
        img.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          var ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          dataURL = canvas.toDataURL('image/png')
          resolve([dataURL, _that.logPieList])
        }
      })
    }
  }
}
</script>
